<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>微信设置</title>
    
    
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="bitStyle/skin/main.css">
    <script src="bitStyle/skin/jquery-1.10.2.min.js"></script>
    <script src="bitStyle/skin/layer.js"></script>
    <link rel="stylesheet" href="bitStyle/skin/layer.css" id="layui_layer_skinlayercss" style="">
    <script src="bitStyle/skin/foundation.js"></script>
    <script src="bitStyle/skin/my.js"></script>
    
<link rel="stylesheet" href="/bitStyle/skin/mui.picker.css">
    <style type="text/css">
        .wrapper {
            display:none;
        }
    </style>
<script src="/bitStyle/skin/validator.js"></script>
<script>
    $(function () {
      //判断是否完善信息
        if("/./Uploads/wechatSet/2019-01-09/5c358d8ad9eff.PNG" == "" ){
            layer.msg("请完善信息");
        }
        $('#form1').show().siblings('.wrapper').hide();

        //上传图片
        $(document).on('change', '#uploadFile', function () {

            var file = document.getElementById('uploadFile').files[0];
            var exp = /png|gif|jpg|jpeg|heif/;
            if (!exp.test(file.name.toLowerCase())) {
                layer.msg("图片格式为png|gif|jpg|jpeg|heif");
                return;
            }
            var src = window.URL.createObjectURL(file);
            //document.getElementById('HeadIcon').src = src;

            var formData = new FormData();
            formData.append('file', file);

            //上传图片
            var result = AjaxUpload('/Home/Rmq/upload.html', formData);

            console.log(result);
            if (result.status == 1) {
                $('#WeChatQrCode').val(result.pic_url);
                layer.msg(result.Message);
                var html = '<img src="' + result.pic_url + '" style="width:100%;height:100%;z-index:5;position: absolute;top: 0;left: 0;" onclick="$(\'#uploadFile\').click();">';
                $('#fileImg').html(html);
            } else {
                layer.msg(result.Message);
                $('#fileImg').html('');
            }
        });
    });


    //第一步
    function NextStep() {
        if (!$('#form1').Validform()) {
            return false;
        }
        $('#form2').show().siblings('.wrapper').hide();
    }

    //第一步
    function NextStep2() {
        if (!$('#form2').Validform()) {
            return false;
        }      
        $('#form3').show().siblings('.wrapper').hide();
    }

    //保存
    function SaveData() {
        if (!$('#form1').Validform()) {
            return false;
        }

        var postData1 = $("#form1").GetWebControls();
        console.log(postData1);

        //var postData2 = $("#form2").GetWebControls();
        //postData2.CrowdCode = $('#CrowdId').text();
        //postData2.AgeCode = $('#AgeId').text();
        //console.log(postData2);

        //var postData3 = $("#form3").GetWebControls();
        //postData3.WantCrowdCode = $('#WantCrowdId').text();
        //postData3.WantAgeCode = $('#WantAgeId').text();
        //console.log(postData3);
       
        var param = {
            WeChat: postData1.WeChat,
            WeChatQrCode: postData1.WeChatQrCode,
            //CrowdId: postData2.CrowdId,
            //CrowdCode: postData2.CrowdCode,
            //AgeId: postData2.AgeId,
            //AgeCode: postData2.AgeCode,
            //Gender: postData2.Gender,
            //WantCrowdId: postData3.WantCrowdId,
            //WantCrowdCode: postData3.WantCrowdCode,
            //WantAgeId: postData3.WantAgeId,
            //WantAgeCode: postData3.WantAgeCode,
            //WantGender: postData3.WantGender,
        };
        var i= layer.load(2);
        $.post('/Home/Rmq/weChatSet.html', param, function (data) {
                layer.close(i);
                if (data.status == 1) {
                    layer.msg(data.Message, function () {
                        window.location.href = "/home/rmq/index.html";
                    });
                } else {
                    layer.msg(data.Message, function () {
                        window.location.href = window.location.href;
                    });
                }
        });
    }
</script>

</head>
<body class="mui-android mui-android-6 mui-android-6-0" style="">
    

<div class="wrapper" id="form1" style="display: block;">
    <div class="back-eee"></div>
    <script>
    function back(){
        window.history.back();
    }
</script>
<style>
    .wrapper .mystyle{background-color:#6AA84F;text-align: center;font-weight: bold; color: #ffffff;
        padding: .4rem 3%; width: 94%; }
    .wrapper .mystyle img{float: left;  height: 100%; }
    .wrapper .notice,.article ,.joinfb,.w33,.my-friend001,.ljjcjj,.pt20,.swiper-container,.myforget,.myreg{margin-top: 1.8rem;}

    .weixin-set,.ewm{margin-top: 2.6rem;}
    .my-money001{margin-top: 2.2rem;}

</style>
<div class="header mystyle"><img onclick="back();" src="bitStyle/skin/back.png">人脉圈</div>

    <div class="want-add weixin-set">
        <div class="addform-list">
            <div class="addform-item">
                <h3 class="h3">微信绑定手机</h3>
                <div class="input-item">
                    <input type="text" id="WeChat" placeholder="单行输入" value="18320969491" maxlength="50" isvalid="yes" checkexpession="NotNull" errormsg="微信绑定手机">
                </div>
            </div>
            <div class="addform-item">
                <h3 class="h3">微信加友指定二维码</h3>
                <div class="file mt20 mb20">            
                    <div id="fileImg">
                        <img src='/./Uploads/wechatSet/2019-01-09/5c358d8ad9eff.PNG' style="width:100%;height:100%;z-index:5;position: absolute;top: 0;left: 0;" onclick="$('#uploadFile').click();">                    </div>
                    <input type="file" id="uploadFile">
                    <input type="hidden" id="WeChatQrCode" isvalid="yes" value="/./Uploads/wechatSet/2019-01-09/5c358d8ad9eff.PNG" checkexpession="NotNull" errormsg="微信二维码">
                </div>
            </div>
        </div>
        <a class="submit-f-btn" href="javascript:SaveData();">确认</a>
    </div>
</div>


<div class="wrapper" id="form2" style="display: none;">
    <div class="back-eee"></div>
    <div class="shade"></div>
    <div class="want-add">
        <h2 class="h2">完善自己信息可精准的匹配您想加的好友</h2>
        <div class="addform-list">
            <div class="addform-item">
                <h3 class="h3">人群</h3>
                <div class="input-item">
                    <p class="p" id="CrowdId" isvalid="yes" checkexpession="NotNull" errormsg="人群">请选择</p>
                </div>
            </div>
            <div class="addform-item">
                <h3 class="h3">性别</h3>
                <div class="input-item">
                    <p class="p" id="Gender" isvalid="yes" checkexpession="NotNull" errormsg="性别">请选择</p>
                </div>
            </div>
            <div class="addform-item">
                <h3 class="h3">年龄</h3>
                <div class="input-item">
                    <p class="p" id="AgeId" isvalid="yes" checkexpession="NotNull" errormsg="年龄">请选择</p>
                </div>
            </div>
        </div>
        <a class="submit-f-btn mt20" href="javascript:NextStep2();">下一步</a>
    </div>
</div>


<div class="wrapper" id="form3" style="display: none;">
    <div class="back-eee"></div>
    <div class="shade"></div>
    <div class="want-add">
        <h2 class="h2">你想要匹配什么样的微信好友？</h2>
        <div class="addform-list">
            <div class="addform-item">
                <h3 class="h3">人群</h3>
                <div class="input-item">
                    <p class="p" id="WantCrowdId" isvalid="yes" checkexpession="NotNull" errormsg="期望人群">请选择</p>
                </div>
            </div>
            <div class="addform-item">
                <h3 class="h3">性别</h3>
                <div class="input-item">
                    <p class="p" id="WantGender" isvalid="yes" checkexpession="NotNull" errormsg="期望性别">请选择</p>
                </div>
            </div>
            <div class="addform-item">
                <h3 class="h3">年龄</h3>
                <div class="input-item">
                    <p class="p" id="WantAgeId" isvalid="yes" checkexpession="NotNull" errormsg="期望年龄">请选择</p>
                </div>
            </div>
        </div>
        <a class="submit-f-btn mt20" href="javascript:SaveData();">保存</a>
    </div>
</div>

<script src="/bitStyle/skin/mui.js"></script>
<script>
    var rq = [{ id: "1", text: "蓝领" }, { id: "2", text: "白领" }, { id: "3", text: "自由职业" }];
    var sex = [{ id: "男", text: "男" }, { id: "女", text: "女" }];
    var age = [{ id: "1", text: "25-50" }, { id: "2", text: "25以下" }];
    //人群
/*    $.ajax({
        type: 'post',
        url: '/Account/GetDataItemDetail',
        data: 'itemId=23c66ce1-06ef-4c2f-ae72-d5387143efed',
        dataType: 'json',
        async: false,
        success: function (data) {
            rq = data;
        },
    });

    //年龄
    $.ajax({
        type: 'post',
        url: '/Account/GetDataItemDetail',
        data: 'itemId=d601f457-86ca-451e-b85d-495c79810dd4',
        dataType: 'json',
        async: false,
        success: function (data) {
            age = data;
        },
    });
 */  
    var shade = document.querySelector('.shade');
    var city_picker1 = new mui.PopPicker();
    document.querySelector('#CrowdId').onclick = function () {
        select.call(this, rq);
    }
    document.querySelector('#Gender').onclick = function () {
        select.call(this, sex);
    }
    document.querySelector('#AgeId').onclick = function () {
        select.call(this, age);
    }
    document.querySelector('#WantCrowdId').onclick = function () {
        select.call(this, rq);
    }
    document.querySelector('#WantGender').onclick = function () {
        select.call(this, sex);
    }
    document.querySelector('#WantAgeId').onclick = function () {
        select.call(this, age);
    }

    function select(data) {
        var that = this;
        city_picker1.setData(data);
        // shade.style.display = 'block';
        setTimeout(function () {
            city_picker1.show(function (item) {
                // shade.style.display = 'none';
                that.innerHTML = item[0].text;
                $(that).attr('param',item[0].id);
            });
        }, 200);
    }
</script><div class="mui-poppicker">		<div class="mui-poppicker-header">			<button class="mui-btn mui-poppicker-btn-cancel">取消</button>			<button class="mui-btn mui-btn-blue mui-poppicker-btn-ok">确定</button>			<div class="mui-poppicker-clear"></div>		</div>		<div class="mui-poppicker-body">		<div class="mui-picker" style="width: 100%;">		<div class="mui-picker-inner fir">			<div class="mui-pciker-rule mui-pciker-rule-ft"></div>			<ul class="mui-pciker-list">			</ul>			<div class="mui-pciker-rule mui-pciker-rule-bg"></div>		</div>	</div></div>	</div>



</body></html>